<template>
  <div class="homeBox">
    <!-- <div class="home">
      <div class="left">
        <van-icon name="wap-nav" />
      </div>
      <div class="mid">中</div>
      <div class="right">右</div>
    </div> -->
    <van-nav-bar>
      <template #right>
        <van-icon name="user-circle-o"  size="25" />
      </template>
      <template #title>
        <van-search shape="round" v-model="value" placeholder="欢迎来到皮皮商城" />
      </template>
      <template #left>
        <van-icon name="scan" size="25" />
      </template>
    </van-nav-bar>

    <van-swipe @change="onChange" class="swipe" :autoplay="3000" :indicator-color="white">
      <van-swipe-item v-for="item in myCarousels" :key="carouselUrl">
        <img :src="item.carouselUrl" :alt="item.carouselUrl">
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="5">
      <van-grid-item :key="value" icon-color="#1989fa" icon="shop-o" text="皮皮超市" />
      <van-grid-item :key="value" icon-color="#1989fa" icon="bag-o" text="皮皮服饰" />
      <van-grid-item :key="value" icon-color="#1989fa" icon="medal-o" text="全球购" />
      <van-grid-item :key="value" icon-color="#1989fa" icon="flower-o" text="皮皮生鲜" />
      <van-grid-item :key="value" icon-color="#1989fa" icon="logistics" text="皮皮到家" />
      <van-grid-item :key="value" icon-color="#1989fa" icon="after-sale" text="皮皮充值" />
      <van-grid-item :key="value" icon-color="#1989fa" icon="gift-o" text="9.9元购" />
      <van-grid-item :key="value" icon-color="#1989fa" icon="discount" text="皮皮领卷" />
      <van-grid-item :key="value" icon-color="#1989fa" icon="cash-o" text="皮皮省钱" />
      <van-grid-item :key="value" icon-color="#1989fa" icon="ellipsis" text="全部商品" />
    </van-grid>
    <goods :dataItem="myNewGoodses">
      <template #title>
        <div>
          <h3>新品上线</h3>
        </div>
      </template>
    </goods>
    <goods :dataItem="myHotGoodses">
      <template #title>
        <div>
          <h3>热销商品</h3>
        </div>
      </template>
    </goods>
    <goods :dataItem="myRecommendGoodses">
      <template #title>
        <div>
          <h3>皮皮推荐</h3>
        </div>
      </template>
    </goods>
  </div>
</template>

<script setup>
import Goods from '../../components/Goods.vue';
import { reactive, onMounted } from 'vue';
import { getIndexInfo } from '../../api';

let myCarousels = reactive([]);
let myHotGoodses = reactive([]);
let myNewGoodses = reactive([]);
let myRecommendGoodses = reactive([]);
let getData = async () => {
  let { data: { carousels, hotGoodses, newGoodses, recommendGoodses }, resultCode } = await getIndexInfo();
  if (resultCode === 200) {
    myCarousels.push(...carousels);
    myHotGoodses.push(...hotGoodses);
    myNewGoodses.push(...newGoodses)
    myRecommendGoodses.push(...recommendGoodses)
  }
}

onMounted(() => {
  getData()
})


</script>

<style lang="less" scoped>
@blue: rgb(61, 129, 212);

.van-search{
  padding: 0;
}
.homeBox{
padding-bottom: 50px;
}
.home {
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  z-index: 99;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: @blue;

  .mid {
    flex: auto
  }
}

.swipe {
  width: 100%;


  .van-swipe-item {
    img {
      width: 100%;
      height: auto;
    }

  }

  .van-grid-item {
    color: @blue;
  }

}</style>